<template>
  <fks-drawer
    :visible.sync="visible"
    direction="rtl"
    :before-close="handleClose"
    custom-class="people-drawer"
    :withHeader="false"
    size="800px"
    destroy-on-close
  >
    <div class="people-drawer-container">
      <div class="people-drawer-header">
        <div>
          <i v-if="peopleType == 'add'" class="fks-icon-plus" />
          <i v-if="peopleType == 'edit'" class="fks-icon-edit" />
          <i v-if="peopleType == 'view'" class="fks-icon-view" />
          {{ title }}
        </div>
        <button
          type="button"
          aria-label="Close"
          @click="closeDrawer"
          class="fks-dialog__headerbtn"
        >
          <i class="fks-dialog__close fks-icon fks-icon-close"></i>
        </button>
      </div>
      <div class="people-drawer-body">
        <fks-form
          ref="Form"
          :model="form"
          :rules="rules"
          :disabled="peopleType == 'view'"
          label-width="85px"
        >
          <div class="form-divider-title">
            <fks-icon class="svg-icon" icon-class="people-base" />
            {{ LANG.BASIC_INFO }}
          </div>
          <div class="form-divider-line"></div>
          <div style="display: flex; align-items: flex-start; margin-top: 16px">
            <div style="width: 50%" class="left-form">
              <div style="margin-bottom: 35px">
                <!-- 姓名 -->
                <fks-form-item
                  prop="userFullname"
                  lead
                  :label="LANG.USER_FULL_NAME"
                >
                  <!-- 新增人员时显示 -->
                  <fks-input
                    v-if="peopleType == 'add'"
                    v-model="form.userFullname"
                    clearable
                    maxlength="50"
                    show-word-limit
                  />
                  <!-- 编辑 -->
                  <fks-input
                    v-if="peopleType != 'add'"
                    v-model="form.userFullname"
                    clearable
                    maxlength="50"
                    show-word-limit
                  />
                </fks-form-item>
              </div>
              <!-- 用户名 -->
              <div style="margin-bottom: 35px">
                <fks-form-item prop="userName" :label="LANG.USERNAME" lead>
                  <!-- 新增 -->
                  <fks-input
                    v-if="peopleType == 'add'"
                    v-model="form.userName"
                    clearable
                    maxlength="50"
                    show-word-limit
                    @input="
                      form.userName = form.userName.replace(/[^a-z0-9_]/g, '')
                    "
                  />
                  <!-- 编辑 -->
                  <fks-input
                    v-if="peopleType != 'add'"
                    v-model="form.userName"
                    clearable
                    maxlength="50"
                    show-word-limit
                    :disabled="peopleType == 'edit'"
                    @input="
                      form.userName = form.userName.replace(/[^a-z0-9_]/g, '')
                    "
                  />
                </fks-form-item>
              </div>
            </div>
            <div style="display: flex; width: 50%">
              <fks-form-item :label="LANG.PHOTO" class="photo">
                <fks-upload
                  v-if="peopleType != 'view'"
                  class="avatar-uploader"
                  :action="url"
                  :with-credentials="true"
                  :headers="{ 'Fawkes-Auth': accessToken }"
                  :show-file-list="false"
                  :data="g9s"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                  :file-list="fileList"
                  drag
                >
                  <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                  <i
                    v-if="!imageUrl"
                    class="fks-icon-picture-outline avatar-uploader-icon"
                  />
                  <span v-if="!imageUrl">{{ LANG.PHOTO_TIP }}</span>
                </fks-upload>
                <template v-if="peopleType == 'view'">
                  <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                  <img v-if="!imageUrl" :src="imageUrl" class="avatar" />
                </template>
              </fks-form-item>
            </div>
          </div>
          <!-- 性别 -->
          <fks-form-item lead :span="12" prop="sex" :label="LANG.SEX">
            <fks-select
              v-model="form.sex"
              style="width: 100%"
              :placeholder="LANG.PLEASE_SELECT"
            >
              <fks-option :label="LANG.MALE" value="男" />
              <fks-option :label="LANG.FEMININITY" value="女" />
            </fks-select>
          </fks-form-item>
          <!-- 出生年月 -->
          <fks-form-item :span="12" prop="birthDay" :label="LANG.BIRTHDAY">
            <div component-type="date" detail-component="true">
              <fks-date-picker
                v-model="form.birthDay"
                align="center"
                type="date"
                value-format="yyyy-MM-dd HH:mm:ss"
                style="width: 100%"
                @change="getAge"
              />
            </div>
          </fks-form-item>
          <fks-form-item lead :span="12" prop="stature" :label="LANG.HEIGHT">
            <fks-input
              v-model.number="form.stature"
              clearable
              class="unitItem"
              maxlength="10"
              oninput="value=value.replace(/[^\d.]/g,'')"
            >
              <template slot="append">
                <span style="font-size: 16px">cm</span>
              </template>
            </fks-input>
          </fks-form-item>
          <fks-form-item :span="12" prop="weight" :label="LANG.WEIGHT">
            <fks-input
              v-model.number="form.weight"
              clearable
              class="unitItem"
              maxlength="10"
              oninput="value=value.replace(/[^0-9.]/g,'')"
            >
              <template slot="append">
                <span style="font-size: 16px">kg</span>
              </template>
            </fks-input>
          </fks-form-item>
          <!-- 国籍 -->
          <fks-form-item
            lead
            :span="12"
            prop="citizenship"
            :label="LANG.NATIONALITY"
          >
            <fks-input
              v-model="form.citizenship"
              clearable
              maxlength="10"
              show-word-limit
            />
          </fks-form-item>
          <!-- 民族 -->
          <fks-form-item :span="12" prop="nationality" :label="LANG.NATION">
            <fks-input
              v-model="form.nationality"
              clearable
              maxlength="10"
              show-word-limit
            />
          </fks-form-item>
          <!-- 籍贯 -->
          <fks-form-item
            lead
            :span="12"
            prop="nativePlace"
            :label="LANG.NATIVE_PLACE"
          >
            <fks-input
              v-model="form.nativePlace"
              clearable
              :maxlength="50"
              show-word-limit
            />
          </fks-form-item>
          <!-- 政治面貌 -->
          <fks-form-item
            :span="12"
            prop="politics"
            :label="LANG.POLITICAL_STATUS"
          >
            <fks-select
              v-model="form.politics"
              style="width: 100%"
              :placeholder="LANG.PLEASE_SELECT"
            >
              <fks-option
                v-for="item in politicsType"
                :key="item.code"
                :label="item[$lang]"
                :value="item.code"
              />
            </fks-select>
          </fks-form-item>
          <!-- 学历 -->
          <fks-form-item
            lead
            :span="12"
            prop="education"
            :label="LANG.EDUCATION"
          >
            <fks-select
              v-model="form.education"
              style="width: 100%"
              :placeholder="LANG.PLEASE_SELECT"
            >
              <fks-option
                v-for="item in degreeType"
                :key="item.code"
                :label="item[$lang]"
                :value="item.code"
              />
            </fks-select>
          </fks-form-item>
          <!-- 婚姻状况 -->
          <fks-form-item
            :span="12"
            prop="marriageState"
            :label="LANG.MARITAL_STATUS"
          >
            <fks-select
              v-model="form.marriageState"
              style="width: 100%"
              :placeholder="LANG.PLEASE_SELECT"
            >
              <fks-option
                v-for="item in marriageType"
                :key="item.code"
                :label="item[$lang]"
                :value="item.code"
              />
            </fks-select>
          </fks-form-item>
          <!-- 证件类型 -->
          <fks-form-item
            lead
            :span="12"
            prop="idcardType"
            :label="LANG.DOCUMENT_TYPE"
            clearable
          >
            <fks-select
              v-model="form.idcardType"
              style="width: 100%"
              clearable
              :placeholder="LANG.PLEASE_SELECT"
              @change="idcardTypeChange"
            >
              <fks-option
                v-for="item in idcardType"
                :key="item.code"
                :label="item[$lang]"
                :value="item.code"
              />
            </fks-select>
          </fks-form-item>
          <!-- 证件号码 -->
          <fks-form-item :span="12" prop="idcardNumber" :label="LANG.ID_NUMBER">
            <fks-input
              v-model="form.idcardNumber"
              clearable
              :maxlength="50"
              show-word-limit
              @change="idcardNumberChange"
            />
          </fks-form-item>
          <div class="form-divider-title">
            <i class="fks-icon-text"></i>
            {{ LANG.CONTACT_INFO }}
          </div>
          <div class="form-divider-line" style="margin-bottom: 16px"></div>

          <!-- 手机号码 -->
          <fks-form-item
            lead
            :span="12"
            prop="phone"
            :label="LANG.PHONE"
            clearable
          >
            <fks-input
              v-model="form.phone"
              clearable
              maxlength="11"
              show-word-limit
            />
          </fks-form-item>
          <!-- 邮箱 -->
          <fks-form-item :span="12" prop="email" :label="LANG.EMAIL" clearable>
            <fks-input
              v-model="form.email"
              clearable
              maxlength="50"
              show-word-limit
            />
          </fks-form-item>
          <!-- 办公地点 -->
          <fks-form-item
            lead
            :span="12"
            prop="officeLocation"
            :label="LANG.OFFICE_LOCATION"
            clearable
          >
            <fks-input
              v-model="form.officeLocation"
              clearable
              maxlength="50"
              show-word-limit
            />
          </fks-form-item>
          <!-- 办公电话 -->
          <fks-form-item
            :span="12"
            prop="officePhone"
            :label="LANG.OFFICE_PHONE"
            clearable
          >
            <fks-input
              v-model="form.officePhone"
              clearable
              maxlength="20"
              show-word-limit
            />
          </fks-form-item>
          <!-- 紧急联系人 -->
          <fks-form-item
            lead
            :span="12"
            prop="emergencyName"
            :label="LANG.EMERGENCY_CONTACT"
            clearable
          >
            <fks-input
              v-model="form.emergencyName"
              clearable
              maxlength="50"
              show-word-limit
            />
          </fks-form-item>
          <!-- 紧急联系人电话 -->
          <fks-form-item
            :span="12"
            prop="emergencyPhone"
            :label="LANG.EMERGENCY_CONTACT_PHONE"
            clearable
          >
            <fks-input
              v-model="form.emergencyPhone"
              clearable
              maxlength="20"
              show-word-limit
            />
          </fks-form-item>
          <div class="form-divider-title">
            <fks-icon class="svg-icon" icon-class="people-work" />
            {{ LANG.WORK_INFORMATION }}
          </div>
          <div class="form-divider-line" style="margin-bottom: 16px"></div>

          <fks-form-item :label="LANG.DEPARTMENT" lead :span="12" prop="deptId">
            <fks-org-selector
              ref="orgSelect"
              url-path="/sys-user/orgs/tree"
              multiple
              :dept-id.sync="form.deptId"
              :dept-name.sync="form.deptName"
              :params="{ portalId: portalId }"
              :multi-index="[0]"
            />
          </fks-form-item>
          <fks-form-item :span="12" prop="title" :label="LANG.DUTIES">
            <fks-input
              v-model="form.title"
              clearable
              maxlength="50"
              show-word-limit
            />
          </fks-form-item>
          <fks-form-item :span="12" lead :label="LANG.POSITION" prop="postList">
            <fks-select
              v-model="form.postList"
              :multiple="true"
              filterable
              :placeholder="LANG.PLEASE_SELECT"
              style="width: 100%"
            >
              <fks-option
                v-for="item in post"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </fks-select>
          </fks-form-item>
          <fks-form-item :span="12" :label="LANG.ENTRY_TIME" prop="hiredate">
            <fks-date-picker
              v-model="form.hiredate"
              :editable="false"
              clearable
              align="center"
              type="date"
              value-format="yyyy-MM-dd HH:mm:ss"
              style="width: 100%"
            />
          </fks-form-item>
          <fks-form-item
            :span="12"
            prop="workingSeniority"
            style="margin-bottom: 0"
            :label="LANG.WORKING_YEARS"
          >
            <fks-input
              v-model="form.workingSeniority"
              oninput="value=value.replace(/[^0-9.]/g,'')"
              maxlength="50"
              show-word-limit
            />
          </fks-form-item>
        </fks-form>
      </div>
      <div class="people-drawer-footer">
        <div class="button-container">
          <fks-button icon="fks-icon-close" @click="handleClose">
            {{ LANG.CANCEL }}
          </fks-button>
          <fks-button
            type="primary"
            icon="fks-icon-check"
            @click="save"
            v-if="peopleType != 'view'"
            :loading="peopleLoading"
          >
            {{ LANG.SAVE }}
          </fks-button>
        </div>
      </div>
    </div>
  </fks-drawer>
</template>
<script>
import { getAddData, getDeleteData } from "@/utils/array";
import * as User from "../api";
import * as stateTypes from "@/store/State/stateTypes";
import * as types from "@/store/Getter/getterTypes.js";
import { mapState } from "vuex";
import { pwdEncrypt } from "@/utils/encryption/pwd";
export default {
  name: "StaffInfo",
  props: {
    peopleData: {
      default() {
        return {
          userName: "",
        };
      },
    },
    peopleType: {
      type: String,
      default: "add",
    },
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      loading: false,
      g9s: {},
      fileList: [],
      peopleLoading: false,
      post: [], //岗位数据
      addPostIdList: [], //新增岗位id数组
      deletePostIdList: [], //删除岗位id数组
      addOrgNoList: [], //新增组织机构id数组
      deleteOrgNoList: [], //删除组织机构id数组
      addUserIdList: [],
      idCard: "",
      imageUrl: "", //图片的URL
      accessToken: this.$storage.get("access_token"),
      url: this.VUE_APP_UPLOAD_API, //代理api
      //搜索栏条件（用户名，手机号，邮箱）
      //新增用户、编辑用户弹窗 显隐
      rowData: {}, //编辑时，克隆原始数据
      diffData: {}, //差异数据，编辑修改保存时，只上传修改过的数据
      form: {},
    };
  },
  computed: {
    title() {
      switch (this.peopleType) {
        case "add":
          return this.LANG.ADD;
        case "view":
          return this.LANG.VIEW;
        default:
          return this.LANG.EDIT;
      }
    },
    //验证规则
    rules() {
      return {
        deptId: [
          {
            required: true,
            message: this.LANG.DEPARTMENT_REQUIRED,
            trigger: "change",
          },
        ],
        userFullname: [
          {
            required: this.peopleType == "add" ? true : false,
            message: this.LANG.USERFULLNAME_NOT_EMPTY,
            trigger: "change",
          },
        ],
        userName: [
          {
            required: this.peopleType == "add" ? true : false,
            message: this.LANG.USERNAME_NOT_EMPTY,
            trigger: "change",
          },

          {
            pattern: this.peopleType == "add" ? /^[a-z][a-z0-9_]*$/g : "",
            message: this.LANG.PERSON_USERNAME_FORMAT,
          },
        ],
        phone: [
          {
            required: true,
            message: this.LANG.PHONE_NOT_EMPTY,
            trigger: "blur",
          },
          {
            pattern: /^1[3456789]\d{9}$/g,
            message: this.LANG.FORMAT_ERROR,
          },
        ],
        idcardType: [
          {
            required: this.form.idcardNumber ? true : false,
            message: this.LANG.DOCUMENT_TYPE_REQUIRED,
            trigger: "change",
          },
        ],
        idcardNumber: [
          {
            required: this.idCard ? true : false,
            message: this.LANG.IDCARD_NOT_EMPTY,
            trigger: "change",
          },
          {
            pattern:
              this.idCard == "IDCARD"
                ? /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/g
                : "",
            message: this.LANG.FORMAT_ERROR,
          },
        ],
        email: [
          {
            required: true,
            message: this.LANG.EMAIL_NOT_EMPTY,
            trigger: "blur",
          },
          {
            pattern: /^[A-Za-z0-9_]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/g,
            message: this.LANG.FORMAT_ERROR,
          },
        ],
      };
    },
    sex() {
      return this.$store.state.enum.sex;
    },
    marriageType() {
      return this.$store.state.enum.marriageStates;
    },
    idcardType() {
      return this.$store.state.enum.idcardType;
    },
    degreeType() {
      return this.$store.state.enum.degreeType;
    },
    politicsType() {
      return this.$store.state.enum.politicsType;
    },
    portalId() {
      return this.$store.state.portal.id;
    },
    multiPortal() {
      return this.$store.getters[types.MULTI_PORTAL];
    },
    ...mapState([stateTypes.ACCOUNT_CONFIG]),
  },
  watch: {
    peopleData: {
      deep: true,
      immediate: true,
      handler(val) {
        if (val.id) {
          this.form = JSON.parse(JSON.stringify(val));
          if (val.orgList) {
            let deptIdList = [];
            let deptNameList = [];
            deptIdList = val.orgList.map((item) => {
              return item.orgNo;
            });
            deptNameList = val.orgList.map((item) => {
              return item.name;
            });
            this.$set(this.form, "deptId", deptIdList.toString());
            this.$set(this.form, "deptName", deptNameList.toString());
          }
          this.getPhoto(this.form);
          this.g9s.g9s = this.form.photoToken;
          this.idCard = this.form.idcardType;
        } else {
          if (this.$refs.orgSelect) {
            this.$refs.orgSelect.chosedList = [];
          }
          this.$set(this.form, "deptId", "");
          this.$set(this.form, "deptName", "");
          this.imageUrl = "";
        }
        this.rowData = JSON.parse(
          JSON.stringify(Object.assign({ deptId: "", deptName: "" }, this.form))
        );
      },
    },
  },
  mounted() {
    this.getpost();
  },
  methods: {
    closeDrawer() {
      this.form = { deptId: "", deptName: "" };
      this.$refs["Form"].resetFields();
      this.$emit("update:visible", false);
    },
    handleClose() {
      this.form = { deptId: "", deptName: "" };
      this.$refs["Form"].resetFields();
      this.$emit("update:visible", false);
    },
    //输入身份证后回调方法
    idcardNumberChange(value) {
      var cardPattern =
        /^.*([1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]).*$/; //身份证
      if (cardPattern.test(value)) {
        let birthDay = "";
        birthDay = this.getAnalysisIdCard(value, 1) + " " + "00:00:00";
        this.$set(this.form, "birthDay", birthDay);
        this.$set(this.form, "sex", this.getAnalysisIdCard(value, 2));
      }
    },
    //从身份证中获取生日、性别
    getAnalysisIdCard(card, num) {
      if (num == 1) {
        //获取出生日期
        let birth =
          card.substring(6, 10) +
          "-" +
          card.substring(10, 12) +
          "-" +
          card.substring(12, 14);
        return birth;
      }
      if (num == 2) {
        //获取性别
        if (parseInt(card.substr(16, 1)) % 2 == 1) {
          //男
          return "男";
        } else {
          //女
          return "女";
        }
      }
      // if (num == 3) {
      //   //获取年龄
      //   var myDate = new Date()
      //   var month = myDate.getMonth() + 1
      //   var day = myDate.getDate()
      //   var age = myDate.getFullYear() - card.substring(6, 10) - 1
      //   if (
      //     card.substring(10, 12) < month ||
      //     (card.substring(10, 12) == month && card.substring(12, 14) <= day)
      //   ) {
      //     age++
      //   }
      //   return age
      // }
    },
    //证件类型切换后回调
    idcardTypeChange(value) {
      this.idCard = value;
    },
    //获取岗位数据
    getpost() {
      User.getpost(this.portalId)
        .then((res) => {
          if (res.status && res.data) {
            res.data.forEach((post) => {
              this.post.push({ value: post.id, label: post.postName });
            });
          }
        })
        .catch(() => {
          this.post = [];
        });
    },
    //校验填入的出生日期合理性
    getAge(val) {
      let date1 = new Date();
      //获取当前时间下的完整年份(4位)
      let thisYear = date1.getFullYear();
      let bDate = new Date(val);
      //获取填写时间的完整年份(4位)
      let brith = bDate.getFullYear();
      let age = thisYear - brith;
      if (age < 1) {
        this.$message.warning(this.LANG.BIRTHDAY_WARRING);
        this.form.birthDay = "";
      }
    },
    //编辑人员保存
    editSave() {
      this.$refs.Form.validate((valid) => {
        if (valid) {
          //判断是否修改过
          this.diffDataMethod();
          //修改过，则调用接口，提交修改,参数要带上用户名&id
          let params = Object.assign(
            {
              userName: this.form.userName,
              id: this.form.id,
              addPostIdList: this.addPostIdList,
              deletePostIdList: this.deletePostIdList,
              addOrgNoList: this.addOrgNoList,
              deleteOrgNoList: this.deleteOrgNoList,
            },
            this.diffData
          );
          User.editUsers(params)
            .then((res) => {
              if (res.status) {
                this.handleClose();
                //修改成功后，清除上次修改对象
                this.$message.success(this.LANG.EDIT_SUCCESS);
                this.$emit("searchUser");
              }
              this.clearData();
              this.peopleLoading = false;
            })
            .catch((error) => {
              this.peopleLoading = false;
            });
        } else {
          this.peopleLoading = false;
        }
      });
    },
    //新增人员保存,当系统设置了默认密码时取系统配置处设置的默认密码，如果没有则为123456
    addSave() {
      this.$refs.Form.validate((valid) => {
        if (valid) {
          let copyForm = this.form;
          let params = Object.assign(copyForm, {
            postIdList: this.form.postList,
            orgNoList: this.form.deptId.split(","),
            password:
              this.accountConfig.initialPassword && this.accountConfig
                ? pwdEncrypt(this.accountConfig.initialPassword)
                : pwdEncrypt("123456"),
          });
          User.saveUser(params)
            .then((res) => {
              this.peopleLoading = false;
              if (res.status) {
                if (this.multiPortal) {
                  User.updatePortal({
                    addUserIdList: res.data.id.split(","),
                    id: this.portalId,
                  })
                    .then((res) => {
                      if (res.status) {
                        this.$message.success(this.LANG.ADD_SUCCESS);
                        this.handleClose();
                        this.$emit("searchUser");
                      }
                    })
                    .catch(() => {});
                } else {
                  this.$message.success(this.LANG.ADD_SUCCESS);
                  this.handleClose();
                  this.$emit("searchUser");
                }
              }
            })
            .catch((error) => {
              this.peopleLoading = false;
            });
        }
        //表单不合格
        else {
          this.peopleLoading = false;
        }
      });
    },
    save() {
      //编辑用户
      this.peopleLoading = true;
      switch (this.peopleType) {
        case "edit": {
          this.editSave();
          break;
        }
        case "add": {
          //新增人员
          this.addSave();
          break;
        }
      }
    },
    clearData() {
      this.diffData = {};
      this.addOrgNoList = [];
      this.deleteOrgNoList = [];
      this.addPostIdList = [];
      this.deletePostIdList = [];
      this.imageUrl = "";
    },

    //比较表单修改值
    diffDataMethod() {
      this.diffData = {};
      //保存时 比较修改的对象，筛选出修改的值，提交时只需要提交修改的值。
      for (let i in this.rowData) {
        if (i == "postList") {
          //返回新增内容n
          getAddData(this.form[i], this.rowData[i]).forEach((item) => {
            this.addPostIdList.push(item);
          });
          //返回删除内容o
          getDeleteData(this.form[i], this.rowData[i]).forEach((item) => {
            this.deletePostIdList.push(item);
          });
        } else if (i == "deptId") {
          let changedOrgData = [];
          let initOrgData = [];
          this.rowData["deptId"]
            ? (initOrgData = this.rowData["deptId"].split(","))
            : (initOrgData = []);
          this.form["deptId"]
            ? (changedOrgData = this.form["deptId"].split(","))
            : (changedOrgData = []);
          //返回新增内容n
          getAddData(changedOrgData, initOrgData).forEach((item) => {
            this.addOrgNoList.push(item);
          });
          //返回删除内容o
          getDeleteData(changedOrgData, initOrgData).forEach((item) => {
            this.deleteOrgNoList.push(item);
          });
        } else if (this.rowData[i] != this.form[i]) {
          this.diffData[i] = this.form[i];
          delete this.diffData.orgList;
        }
      }
    },
    //照片上传成功的操作
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      //把文件的token赋值,下载的时候需要传token
      this.form.photoToken = res.data.fileToken;
    },
    //照片上传之前的操作,检查格式
    beforeAvatarUpload(file) {
      const isJPG = file.type == "image/jpeg";
      const isPNG = file.type == "image/png";
      const isBMP = file.type == "image/bmp";
      const isLt2M = file.size / 1024 / 1024 < 2;
      const isLt0k = file.size / 1024 > 0;
      if (!isJPG && !isPNG && !isBMP) {
        this.$message.error(this.LANG.STAFF_POHTO_TIP);
      }
      if (!isLt2M) {
        this.$message.error(this.LANG.RULE_PHOTO_BIG);
      }
      if (!isLt0k) {
        this.$message.error(this.LANG.RULE_PHOTO_SMALL);
      }
      return (isJPG || isPNG || isBMP) && isLt2M && isLt0k;
    },
    getPhoto(form) {
      if (this.form.photoToken) {
        this.imageUrl =
          this.VUE_APP_DOWNLOAD_IMG_API + "?f8s=" + this.form.photoToken;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.people-drawer {
  &-container {
    margin: 0;
    height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
  }
  &-header {
    padding: 16px 16px;
    border-bottom: 1px #eeeeee solid;
    flex-shrink: 0;
    flex-grow: 0;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 22px;
    display: flex;
    justify-content: space-between;
  }
  &-body {
    flex-shrink: 1;
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 26px 24px 0px 24px;
    .fks-form {
      margin-right: 0px;
      margin-left: 0;
    }
    .fks-form-item {
      padding-right: 24px;
    }
    &::-webkit-scrollbar {
      display: none;
    }
    .form-divider-line {
      width: 100%;
      height: 1px;
      background: #eeeeee;
    }
    .form-divider-title {
      width: 100%;
      margin-bottom: 8px;
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      display: flex;
      align-items: center;

      i {
        color: var(--theme-color);
        font-size: 16px;
        margin-right: 2px;
      }
    }
  }
  &-footer {
    flex-shrink: 0;
    flex-grow: 0;
    display: flex;
    justify-content: flex-end;
    padding: 16px 24px;
    margin-top: 24px;
    border-top: 1px #ddd solid;
  }
}
::v-deep .fks-upload-dragger {
  width: 106px;
  height: 140px;
  margin: 0 auto;
  margin-bottom: 16px;
  border: 1px solid #d4d9e0;
  background-color: #fafafa;

  .avatar-uploader-icon {
    display: block;
    margin: 50px 0 0;
    font-size: 24px;
    text-align: center;
    color: #c7c7c7;
  }

  span {
    font-weight: 400;
    font-size: 12px;
    line-height: 17px;
    color: #c7c7c7;
  }
}

::v-deep .file-card {
  width: 106px;
  min-width: 106px !important;
  margin: auto !important;
}

.viewAvatar {
  width: 106px !important;
  height: 140px !important;
}

.avatar {
  width: 106px;
  height: 140px;
  // margin: 0 auto;
}

.uploadText {
  min-width: 85px;
  margin-right: 8px;
  font-size: 14px;
  line-height: 140px;
  text-align: right;
}

@media screen and (max-width: 480px) {
  .left-form {
    flex: 1;
    ~ div {
      width: auto !important;
      ::v-deep .fks-form-item__label {
        display: none;
      }
      ::v-deep .fks-form-item__content {
        margin-left: 0 !important;
      }
    }
  }
}

.photo {
  ::v-deep .fks-form-item__content {
    display: flex;
    justify-content: center;
  }
}
.svg-icon {
  color: var(--theme-color);
  width: 16px;
  height: 16px;
  margin-right: 2px;
}
</style>